<!--物料产品管理-->
<template>
    <el-dialog @close="chooseCancel" v-model="dialogVisible" width="1200px" title="选择客户信息" destroy-on-close
               center>

        <div>
            <!--        对话框-->
            <customer-info-dialog :is-edit="edit" :data="info" :visible="infoDialogVisible" @callClosed="handleInfoClosed"
                                  @callSaveSuccess="handleSaveSuccess"/>
            <div class="main-title">客户管理</div>
            <el-row justify="space-evenly">
                <el-col :span="20">
                    <el-input v-model="queryData.name" placeholder="输入用户相关信息"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-button-group>
                        <el-button type="primary" @click="handleQuery">
                            <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                        </el-button>
                        <el-button type="default" @click="handleAdd">
                            <bar-icon :icon="'add'" :width="15" :height="15" :color="'#409eff'"/>

                        </el-button>
                        <el-button type="danger" :disabled="selection.length === 0" @click="handleDelete">
                            <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>

                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
<!--            @selectionChange="handleSelectionChanged"-->
            <el-table :data="tableData" class="cute-table" height="600" ref="singleTableRef"
                      highlight-current-row
                      @current-change="handleCurrentChange">
                <el-table-column type="index"/>
                <el-table-column label="客户logo" class="cute-column">
                    <template #default="scope">
                        <img :src="scope.row.logo" alt="客户LOGO" style="width: 50px;height: 50px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="客户名称" class="cute-column"></el-table-column>
                <el-table-column label="客户类别" class="cute-column">
                    <template #default="scope">
                        <el-tag v-if="scope.row.typeCustomer === '0'" :type="'info'">普通用户</el-tag>
                        <el-tag v-if="scope.row.typeCustomer === '1'" :type="'primary'">重点用户</el-tag>
                        <el-tag v-if="scope.row.typeCustomer === '2'" :type="'warning'">VIP</el-tag>
                        <el-tag v-if="scope.row.typeCustomer === '3'" :type="'danger'">SVIP</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" class="cute-column">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status===1" type="success">正常</el-tag>
                        <el-tooltip v-else
                                    class="item"
                                    effect="dark"
                                    content="点击解除"
                                    placement="left"
                        >
                            <el-tag style="cursor:pointer;" @click="handleUnblock(scope.row)" type="danger">已拉黑</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话" class="cute-column"></el-table-column>
                <el-table-column prop="email" label="电子邮箱" width="200px" class="cute-column"></el-table-column>
                <el-table-column prop="profile" label="客户简介" class="cute-column"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="查看详情"
                                placement="left"
                        >
                            <bar-icon @click="makeDetails(scope.row)" style="cursor:pointer;" :icon="'see'" :width="20"
                                      :height="20" :color="'#409eff'"/>

                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination layout="prev, pager, next" :total="total" @change="handleChanged"/>
            </div>
        </div>

        <!-- 确认/取消按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="passChoose">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="chooseCancel">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import customerAPI from "@/util/request-md/customer/customer.js"
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import CustomerInfoDialog from "@/components/widget/dialog/CustomerInfoDialog.vue";
import {watch} from "vue";

export default {
    name: 'customer.vue',
    components: {CustomerInfoDialog, BarIcon},
    props:['visible'],
    emits: ["optionCompleted","justCloseWin"],
    data() {
        return {
            currentRow:null,
            customerList: [],
            queryData: {
                name: '',
                limit: 10,
                page: 1
            },
            edit:false,
            infoDialogVisible: false,
            total: 0,
            info: {},
            tableData: [],
            selection: [],
            dialogVisible:false
        }
    },
    methods: {
        /**
         * 关闭窗口
         */
        chooseCancel(){
            this.currentRow = {};
            console.log("我也被调用了")
            this.$emit("justCloseWin");
        },
        passChoose(){
            this.$emit("optionCompleted", this.currentRow);
        },
        handleCurrentChange(val){
            this.currentRow = val;
            console.log(this.currentRow)
        },
        handleQuery() {
            this.loadCustomerInfos();
        },
        handleAdd(){
            this.infoDialogVisible = true;
            this.info={};
            this.edit = true;
        },
        loadCustomerInfos() {
            customerAPI.getCustomers(this.queryData, (res) => {
                if (res.code === 200) {
                    console.log(res.data, 'res')
                    this.tableData = res.data;
                }
            })
            customerAPI.getCount((res) => {
                if (res.code === 200) {
                    this.total = res.data;
                }
            })
        },
        handleDelete() {
            this.selection.map(item => {
                customerAPI.deleteCustomer({
                    id: item.idCustomer,
                    status: 0
                }, (res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '已拉黑',
                            type: 'success'
                        });
                        item.status = 0;
                        // this.loadCustomerInfos();
                    }
                })
            })

        },
        //解除拉黑
        handleUnblock(data) {
            //提示是否解除拉黑
            this.$confirm(`此操作将解除${data.idCustomer}客户拉黑, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                customerAPI.deleteCustomer({id: data.idCustomer, status: 1}, (res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '已解除拉黑',
                            type: 'success'
                        });
                        data.status = 1;
                    }
                })
            })
        },
        handleChanged(currentPage) {
            this.queryData.page = currentPage;
            this.loadCustomerInfos();
        },
        makeDetails(data) {
            this.info = data;
            this.edit = false;
            this.infoDialogVisible = true;
        },
        handleInfoClosed() {
            this.infoDialogVisible = false;
        },
        handleSaveSuccess() {
            this.infoDialogVisible = false;
            this.loadCustomerInfos();
        },
        handleSelectionChanged(data) {

            for (let i = data.length - 1; i >= 0; i--) {
                if (data[i].status === 0) {
                    this.$message.error("已拉黑的客户不能进行操作");
                    this.selection = [];
                    return;
                }
            }
            this.selection = data;
        }
    },
    mounted() {
        this.loadCustomerInfos();
        watch(() => this.visible, (newValue, oldValue) => {
            this.dialogVisible = newValue;
        })
    }
}
</script>

<style scoped>
/*.main-title {*/
/*    margin: 20px 50px 20px 70px;*/
/*}*/

.pagination-block {
    display: block;
    bottom: 5px;
}
</style>
